<template>
  <div class="JJOp1">
    <div class="SearchExampleContainer">
      <JJTableSearch :search-options="searchOptions" />
    </div>
    <json-viewer :value="searchOptions" :expand-depth="5" expanded style="flex-grow: 1; overflow-y: auto"></json-viewer>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import JJTableSearch from '../JJTableSearch.vue'

export default defineComponent({
  name: 'JJOp1',
  components: { JJTableSearch },
  data() {
    return {
      searchOptions: {
        name: {
          type: 'input',
          label: 'Name',
          value: '',
          placeholder: 'Input name',
          width: 150,
          clearable: true
        },
        gender: {
          type: 'dropdown',
          label: 'Gender',
          value: '',
          placeholder: '',
          width: 100,
          options: [
            {
              value: '0',
              label: '男'
            },
            {
              value: '1',
              label: '女'
            }
          ]
        },
        date: {
          type: 'date',
          label: 'Date',
          value: '',
          placeholder: 'Pick a date',
          width: 150
        }
      }
    }
  }
})
</script>

<style lang="scss">
.JJOp1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .SearchExampleContainer {
    margin: calc(var(--u-gap) * 1.4) 0;
  }
}
</style>
